<template>
  <div>
    <el-row  >
      <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index" class="wir">
        <div class="grid-content bg-purple">
     <img :src="item.img" />    <p>{{ item.name }}  <br> {{ item.price }}</p> 
      </div
      ></el-col>
    </el-row>
      
          

             <div class="daichu">
            <h4>待处理事务</h4>
            <div class="diyi">
               <ul class="daichu1">
                <li> 代付款订单  <span>(10)</span> </li>
                <li> 代发货订单  <span>(30)</span></li>
                <li> 已发货订单   <span>(12)</span></li>
              </ul>
               <ul class="daichu1">
                <li> 代付款订单  <span>(10)</span> </li>
                <li> 代发货订单  <span>(30)</span></li>
                <li> 已发货订单   <span>(12)</span></li>
              </ul>
               <ul class="daichu1">
                <li> 代付款订单  <span>(10)</span> </li>
                <li> 代发货订单  <span>(30)</span></li>
                <li> 已发货订单   <span>(12)</span></li>
              </ul>
            </div>
             
                </div>
       
           <div class="disan">
              <div class="disanA">
                  <h4>商品总览</h4>
                  <div class='disanA-A'>
                      <div>
                         <span>100</span><br>
                         <span>已下架</span>
                      </div>
                      <div>
                         <span>400</span><br>
                         <span>已下架</span>
                      </div>
                      <div>
                        <span>50</span><br>
                        <span>库房紧张</span>
                      </div>
                      <div>
                        <span>500</span><br>
                        <span>全部商品</span>
                      </div>
                  </div>
              </div>

              <div class="disanB">
                 <h4>商品总览</h4>
                  <div class='disanB-B'>
                      <div>
                         <span>100</span><br>
                         <span>已下架</span>
                      </div>
                      <div>
                         <span>400</span><br>
                         <span>已下架</span>
                      </div>
                      <div>
                        <span>50</span><br>
                        <span>库房紧张</span>
                      </div>
                      <div>
                        <span>500</span><br>
                        <span>全部商品</span>
                      </div>
                  </div>
              </div>
           </div>
        
          <div class="disi">
          <h4>订单统计</h4>
          <div class="lai">
             <ul class="disi1">
               <li>
               <p class="disi2">本月订单统计</p>
                <h5>10000</h5> 
                <p class="disi3"><span>+10%</span>同比上月</p>
               </li>
              
                <li>
               <p class="disi2">本月订单统计</p>
                <h5>10000</h5> 
                <p class="disi4"><span>+10%</span>同比上月</p>
               </li>

                 <li>
               <p class="disi2">本月订单统计</p>
                <h5>10000</h5> 
                <p class="disi3"><span>+10%</span>同比上月</p>
               </li>
                 <li>
               <p class="disi2">本月订单统计</p>
                <h5>10000</h5> 
                <p class="disi4"><span>+10%</span>同比上月</p>
               </li>
          </ul>
            
              <div id="mychart" class="mychart">

              </div>


          </div>
            
         
         
         
           

          </div>
             <!-- 显示图表 -->
 
 



  </div>
  
</template>

<script>
export default {
  name: "home",
  data: function () {
    return {
      dingdanArr: [
        {
          id: 1,
          name: "今日订单总数",
          price: "200",
          //在 js里面获取 vue项目的本地图片 ，需要使用  require
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日订单总数1",
          price: "300",
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 3,
          name: "今日订单总数2",
          price: "400",
          img: require("@/assets/images/home_order.png"),
        },
      ],
        option:{
          //图标数据
          //x轴数据
          xAxis:{
            type:"category",
            data:["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
           yAxis: {
          type: "value",
        },
         series: [
          {
            data: [400, 200, 150, 80, 70, 110, 200],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
        }  
    };
  },
  mounted () {
      //调用 画图表的函数
    this.drawLine();
  },
  methods: {
      drawLine() {
      //1.初始化
      let mycharts = this.$echarts.init(document.getElementById("mychart"));
      //2.绘制
      mycharts.setOption(this.option);
    }, 
  }
};
//使用上面你数据，添加另外一种图形，列如：饼形图
</script>

<style lang="scss" sponed>
   //图标
   .mychart {
  width: 600px;
  height: 400px;
  
}



    .grid-content{
        border: 1px solid #ccc;
       display: flex;
     margin-left: 35px;
     margin-top: 20px;
    }
   .wir{
    width: 33%;
    height: 152px;
   }
    .grid-content img{
        width: 50px;
        height: 50px;
     
    // border-radius: 5px;
    margin: 10px;
    // height: 100px;
    // display: flex;
    // justify-content: space-around;
    padding-top: 30px;
    margin-left: 35px;
    }
     .grid-content p{
        padding-top: 30px;
     }
     .daichu{
       width: 97%;
       height: 200px;
       border: 1px solid #ccc;
       display: flex;
       flex-direction: column;
       margin-left: 35px;
     margin-top: 20px;
     }
     .daichu h4{
       background: #f2f6fc ;
        height: 44px;
     }
     .diyi{
        display: flex;
     }
     .daichu ul{
         width: 30%;
         height: 100px;
         list-style: none;
         float: left;
        margin-left: 30px;
        margin-top: 20px;
     }
     .daichu1 li{
       padding: 5px 0;
       border-bottom: 1px solid #ccc;
     }
    .daichu1 li span{
      float: right;
      color: red;
    }
   .disan{
      width: 97%;
       height: 142px;
        margin-left: 30px;
        margin-top: 20px;
        display: flex;
   }
    .disanA{
      width: 48.5%;
      height: 142px;
        border: 1px solid #ccc;
      h4{
        background: #f2f6fc ;
        height: 30px;
      }
    }
    .disanB{
      width: 48.5%;
      height: 142px;
        border: 1px solid #ccc;
        margin-left: 40px;
         h4{
        background: #f2f6fc ;
        height: 30px;
      }
    }
    .disanA-A{
      display: flex;
   
      div{
        width: 80px;
        height: 60px;
        margin-top: 40px;
        margin-left: 70px;
        text-align: center;
      }
    }
   .disanB-B{
      display: flex;
   
      div{
        width: 80px;
        height: 60px;
        margin-top: 40px;
        margin-left: 70px;
        text-align: center;
      }
    }
    .disi{
        width: 97%;
       height: 500px;
        margin-left: 30px;
        margin-top: 10px;
        border: 1px solid #ccc;
        h4{
            background: #f2f6fc ;
        height: 44px;
        }
        h5{
            margin-top: 10px;
        }
        li{
        padding: 10px;
        }
    }
    .disi1{
      width: 200px;
       height: 450px;
      border-right: 1px solid #ccc;
    }
    .disi2{
      color:#ccc;
           margin-top: 10px;
    }
    .disi3{
       color:#ccc;
          margin-top: 10px;
       span{
         color:rgb(18, 241, 18);
       }
    }
     .disi4{
       color:#ccc;
          margin-top: 10px;
       span{
         color:red;
       }
    }
    .tubiao{
      width: 600px;
      height: 200px;
      background: red;
    }
    .lai{
      width: 90%;
      height: 500px;
      display: flex;
      // justify-content: center;
      align-items: center;
    }
</style>